<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/vue.js"></script>
    <link rel="stylesheet" href="./highlight/styles/agate.css"> 
    <script src="./highlight/highlight.pack.js"></script> 
    <script > hljs.initHighlightingOnLoad();</script>
    <script src="./js/my-pre.js"></script>
</head>
<body>

    <div id="app">
        <my-com message="来自父组件的数据"></my-com>

        <my-pre :init-string="string0"></my-pre>
        <hr>
        <br>
        <p>这里由input动态输入数据,然后传给下面的子组件</p>
        <input v-model = "parentMessage">
        <my-com2 :message2="parentMessage"></my-com2>

        <my-pre :init-string="string1"></my-pre>

        <hr>
        <br>
        <p>如果你要直接传递数字,布尔值,数组,对象,而且不使用v-bind,那么传递的仅仅是字符串,看下面的例子</p>
        <my-com3 message="[1,2,3]"></my-com3>
        <my-com3 :message="[1,2,3]"> </my-com3>
        <my-pre :init-string="string3"></my-pre>
        <hr>
        <br>
        <input v-model="num" style="width:300x">
        <my-com4 :init-count="num"></my-com4>

        <my-pre :init-string="string4"></my-pre>

        <hr>
        <br>
        <p>父数据作为被转变的对象引入,这个时候,需要在组件computed中返回转变的对象</p>
        <my-com5 width="100"></my-com5>

        <my-pre :init-string="string5"></my-pre>


    </div>
   
    <script>
        Vue.component('my-com',{
            props:['message'], //这个相当于自定义标签,在组件上使用
            template:'<div>{{message}}</div>',
        });

        Vue.component('my-com2',{
            props:['message2'],
            template:'<div>{{message2}}</div>'
        })

        Vue.component('my-com3',{
            props:['message'],
            template:'<div>{{message.length}}</div>'
        })

        Vue.component('my-com4',{
            props:['initCount'],
            template:'<div><p>下面我在组件中变化</p><input v-model="count">{{count}}</div>',
            data(){
                return {
                    count:this.initCount
                }
            }
        })

        Vue.component('my-com5',{
            props:['width'],
            template:'<div :style="style">组件内容</div>',
            computed:{
                style(){
                    return {
                        width:this.width +'px'
                    }
                }
            }
        })

        var app = new Vue({
            el:'#app',
            data:{
                parentMessage:'aaa',
                num:'我是父的原始数据,被我在组件中初始化了,之后父组件发生变化,我就不变化了',
                string0 : hereDoc(function(){/*
                    <my-com message="来自父组件的数据"></my-com>
         Vue.component('my-com',{
            props:['message'], //这个相当于自定义标签,在组件上使用
            template:'<div>{{message}}</div>',
        });

                */}),
                string1: hereDoc(function(){/*
                    <input v-model = "parentMessage">
                    <my-com2 :message2="parentMessage"></my-com2>

                    Vue.component('my-com2',{
                        props:['message2'],
                        template:'<div>{{message2}}</div>'
                    })

                */}),
                string3: hereDoc(function(){/*
        <my-com3 message="[1,2,3]"></my-com3>
        <my-com3 :message="[1,2,3]"> </my-com3>

         Vue.component('my-com3',{
            props:['message'],
            template:'<div>{{message.length}}</div>'
        })
                */}),
                string4: hereDoc(function(){/*
         <input v-model="num">
        <my-com4 :init-count="num"></my-com4>

        Vue.component('my-com4',{
            props:['initCount'],
            template:'<div><p>我在组件中变化</p><input v-model="count">{{count}}</div>',
            data(){
                return {
                    count:this.initCount
                }
            }
        })
                */}),
                string5: hereDoc(function(){/*
        <my-com5 width="100"></my-com5>
        
        Vue.component('my-com5',{
            props:['width'],
            template:'<div :style="style">组件内容</div>',
            computed:{
                style(){
                    return {
                        width:this.width +'px'
                    }
                }
            }
        })

                */})
            }
        })
    </script>
    
</body>
</html>